<div class="squireSelectFontFamily-container" data-squire-dropdown>
    <div class="squireToolbar-select-view">
        <button
            type="button"
            class="squireDropdown-item-label squireToolbar-action-fontFamily"
            data-squire-actions="changeFontFamily"
            pt-tooltip-translate-context="Action"
            pt-tooltip-translate="Change font"
            translate-context="Font"
            translate>
            <span class="value">Arial</span>
            <i class="fa fa-angle-down"></i>
        </button>
    </div>
    <ul class="squireToolbar-select-list squireToolbar-font-family" data-squire-actions="setFontFace" data-squire-ignore="true">
        <li class="squireToolbar-select-item" data-value="georgia">Georgia</li>
        <li class="squireToolbar-select-item" data-value="arial">Arial</li>
        <li class="squireToolbar-select-item" data-value="helvetica">Helvetica</li>
        <li class="squireToolbar-select-item" data-value="menlo, consolas, courier new, monospace">Monospace</li>
        <li class="squireToolbar-select-item" data-value="tahoma, sans-serif">Tahoma</li>
        <li class="squireToolbar-select-item" data-value="verdana">Verdana</li>
        <li class="squireToolbar-select-item" data-value="times new roman">Times New Roman</li>
        <li class="squireToolbar-select-item" data-value="trebuchet ms">Trebuchet MS</li>
    </ul>
</div>
